<template>
  <div class="duty_add">
    <div class="duty_choose">
      <van-dropdown-menu>
        <van-dropdown-item
          @change="resizeList"
          title-class="time_title"
          v-model="search.leaveType"
          :options="leaveList" />
      </van-dropdown-menu>
      <van-dropdown-menu>
        <van-dropdown-item
          @change="resizeList"
          title-class="time_title"
          v-model="search.dailyStatus"
          :options="statusList" />
      </van-dropdown-menu>
      <div class="duty_choose_time" @click="sheetShowFun" v-if="active == '2'">
        {{ showActions || '科室/人员' }}
        <span></span>
      </div>
      <div class="duty_choose_time" @click="timeChoose(chooseTime)">
        {{ chooseTime || '时间' }}
        <span></span>
      </div>
    </div>
    <div class="dutyList">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="listDate.length > 0 ? '没有更多了' : ''"
        @load="listAttendanceLeave"
        :offset="300"
        :immediate-check="true">
        <div class="duty_box" v-if="listDate.length > 0">
          <div class="duty_info" @click="goToDutyDetail(item)" v-for="(item, index) in listDate" :key="index">
            <div class="top">
              <div>
                <span>{{ item.formName }}</span>
                <span class="center_status" v-if="item.isCanceled === '1'">已销假</span>
              </div>
              <div class="center_right">
                <div class="recall" @click.stop="btnCheck(item)" v-if="active == '1' && item.canRevoke == '1'">
                  <van-icon name="revoke" title="撤回" />
                </div>
                <div
                  class="recall"
                  @click.stop="editCheck(item)"
                  v-if="active == '1' && (item.dailyStatus == '3' || item.dailyStatus == '4')">
                  <van-icon name="edit" title="编辑" />
                </div>
                <div class="recall" @click.stop="endOut(item)" v-if="active == '1' && item.isCanZZ == '1'">
                  <i class="iconfont iconzhongzhi"></i>
                </div>
              </div>
            </div>
            <div class="center">
              <div
                class="duty_center"
                :class="
                  item.dailyStatus == '0' ? 'r_btn_red' : item.dailyStatus == '1' ? 'r_btn_success' : 'r_btn_primary'
                ">
                {{ item.statusDesc }}
              </div>
              <div class="top_titme">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
        <van-empty v-else description="暂无数据" />
      </van-list>
    </div>
    <!-- 底部保存按钮 -->
    <div class="addNew" @click="goToAdd" v-if="active == '1'">
      <img src="@/assets/images/common/add_new.png" alt="" />
    </div>
    <van-popup v-model="showTime" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="请选择时间"
        :min-date="minDate"
        @cancel="timeCancel"
        @confirm="timeConfirm" />
    </van-popup>

    <van-popup class="popu_picker" v-model="showTypes" position="bottom">
      <van-picker
        show-toolbar
        visible-item-count="4"
        :columns="timeOption"
        default-index="0"
        @cancel="showTypes = false"
        @confirm="onConfirmY" />
    </van-popup>

    <!-- @finish="cascaderOnFinish"
        @close="sheetShow = false" -->
    <van-popup v-model="sheetShow" position="bottom">
      <van-cascader
        :field-names="fieldNames"
        v-model="cascaderValue"
        title="请选择"
        :options="options"
        @change="cascaderOnChange"
        @close="cancelOrg"
        @finish="cascaderOnFinish" />
    </van-popup>
  </div>
</template>

<script>
import {
  listAttendanceDaily,
  listAttendanceFormType,
  attendAllDepartment,
  attendAllPerson,
  updateAttendanceDailyStatus,
} from '@api/api-attendance.js'
export default {
  name: 'DutyAddList',
  components: {},
  props: {
    showDuCha: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      active: '1',
      statusList: [
        { text: '状态', value: '' },
        { text: '处理中', value: '0' },
        { text: '已通过', value: '1' },
        { text: '不通过', value: '2' },
        { text: '已退回', value: '3' },
        { text: '已撤回', value: '4' },
        { text: '终止', value: '5' },
      ],
      leaveList: [{ text: '类型', value: '' }],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      search: {
        time: '',
        leaveType: '',
        dailyStatus: '',
        userId: '',
        selOrg: '',
        selUser: '',
        qryType: '1',
      },
      chooseTime: '',
      listDate: [],
      loading: false,
      finished: false,
      showTime: false,
      statrEnd: true,
      minDate: new Date(2023, 0, 1), // 最小限制时间
      currentDate: new Date(), // 当前时间
      currentDateStart: new Date(), // 当前时间
      currentDateEnd: new Date(), // 当前时间
      showTypes: false,
      timeOption: [
        // { text: '请假单', value: '1' },
        // { text: '公务外出单', value: '2' },
        // { text: '销假单', value: '3' },
        // { text: '错时上班', value: '4' },
        // { text: '补卡单', value: '5' },
        // { text: '调休单', value: '6' },
      ],
      fieldNames: {
        text: 'name',
        value: 'id',
      },
      cascaderValue: '',
      options: [],
      sheetShow: false,
      showActions: '',
      rotePage: 'DutyAddList',
    }
  },
  created() {
    let routeLength = this.rotePage.length
    if (this.$store.state.pageTabTwo.substring(0, routeLength) == this.rotePage) {
      this.active = this.$store.state.pageTabTwo.substring(routeLength)
    }
    this.listAttendanceFormType()
    this.getSelectAllDepartment()
  },
  mounted() {},
  methods: {
    sheetShowFun() {
      this.sheetShow = true
    },
    // 获取科室
    getSelectAllDepartment() {
      attendAllDepartment({
        type: '1',
      }).then(res => {
        this.options.push({
          name: '全部',
          id: '',
        })
        res.data.forEach(item => {
          this.options.push({
            name: item.text,
            id: item.id,
            children: [],
          })
        })
      })
    },
    cascaderOnChange({ value, selectedOptions }) {
      let that = this
      if (value) {
        this.options.forEach((item, index) => {
          if (item.id == value) {
            this.search.selOrg = value
            this.showActions = selectedOptions[0].name
            this.search.selUser = ''
            attendAllPerson({
              id: value,
            }).then(res => {
              that.options[index].children = []
              res.data.forEach(item => {
                that.options[index].children.push({
                  name: item.text,
                  id: item.id,
                })
              })
            })
          }
        })
      }
    },
    cancelOrg() {
      this.sheetShow = false
      this.tablePage.currentPage = 1
      this.listDate = []
      this.listAttendanceLeave()
    },
    //
    cascaderOnFinish(el) {
      this.showActions = el.selectedOptions.map(option => option.name).join(':')
      this.search.selUser = el.value
    },

    onTabsClick() {
      this.$store.state.pageTabTwo = this.rotePage + this.active
      this.tablePage.currentPage = 1
      this.listDate = []
      this.search.selUser = ''
      this.search.selOrg = ''
      this.showActions = ''
      this.finished = false
      this.listAttendanceLeave()
    },
    listAttendanceFormType() {
      listAttendanceFormType({}).then(res => {
        res.data.forEach(element => {
          this.leaveList.push({ text: element.formName, value: element.id })
          this.timeOption.push({ text: element.formName, value: element.id })
        })
      })
    },
    // 获取登记数据列表
    listAttendanceLeave() {
      this.loading = true
      let serarh = {
        userId: '',
        createDate: this.search.time,
        formId: this.search.leaveType,
        dailyStatus: this.search.dailyStatus,
        qryType: this.active,
        selUser: this.search.selUser,
        selOrg: this.search.selOrg,
      }
      listAttendanceDaily({
        currentPage: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        param: { ...serarh },
      }).then(res => {
        if (res.status === 200) {
          this.listDate.push(...res.data.content)
          this.tablePage.currentPage++
          this.tablePage.totalResult = res.data.totalSize
          this.loading = false
          if (this.listDate.length === this.tablePage.totalResult) {
            this.finished = true
          }
        }
      })
    },
    // 登记列表跳转详情
    goToDutyDetail(item) {
      let type = this.active == '1' ? '2' : '3'
      this.$router.push({
        path: '/detailOutDuty',
        query: {
          id: item.dailyId,
          formId: item.formId,
          processInstanceId: item.processInstanceId,
          taskId: item.taskId,
          type: type,
          isCanZZ: item.isCanZZ,
        },
      })
    },
    // 选择时间
    timeChoose(time) {
      this.showTime = true
      if (time) {
        let y = time.slice(0, 4)
        let m = time.slice(5, time.length - 1)
        this.currentDate = new Date(y, m - 1)
      } else {
        this.currentDate = new Date()
      }
    },
    timeCancel() {
      this.showTime = false
      this.chooseTime = ''
      this.search.time
      this.resizeList()
    },
    // 时间确定
    timeConfirm() {
      this.showTime = false
      let date = new Date(this.currentDate)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let m1 = m < 10 ? '0' + m : m
      this.chooseTime = String(y) + '年' + String(m) + '月'
      this.search.time = String(y) + '-' + String(m1)
      this.resizeList()
    },
    resizeList() {
      this.tablePage.currentPage = 1
      this.listDate = []
      this.finished = false
      this.listAttendanceLeave()
    },

    goToAdd() {
      this.showTypes = true
    },
    // 时间确定
    onConfirmY(value) {
      this.showTypes = false
      this.$router.push({ path: '/addOutDuty', query: { id: '', title: value.text, formId: value.value } })
    },
    //撤销
    btnCheck(item) {
      this.$dialog
        .confirm({
          message: '您确定要撤回表单吗？',
        })
        .then(() => {
          updateAttendanceDailyStatus({
            content: '',
            dailyId: item.dailyId,
            formId: item.formId,
            status: '4',
            processInstanceId: item.processInstanceId,
            taskId: item.taskId,
          }).then(res => {
            if (res.status === 200) {
              this.$toast.success('撤销成功')
              setTimeout(() => {
                this.resizeList()
              }, 500)
            }
          })
        })
        .catch(() => {})
    },

    //编辑
    editCheck(item) {
      this.$router.push({
        path: '/addOutDuty',
        query: {
          id: item.dailyId,
          formId: item.formId,
          processInstanceId: item.processInstanceId,
          taskId: item.taskId,
          isCanZZ: item.isCanZZ,
          operate: 'edit',
        },
      })
    },
    endOut(item) {
      this.$dialog
        .confirm({
          message: '您确定要终止表单吗？',
        })
        .then(() => {
          updateAttendanceDailyStatus({
            content: '',
            dailyId: item.dailyId,
            formId: item.formId,
            status: '5',
            processInstanceId: item.processInstanceId,
            taskId: item.taskId,
          }).then(res => {
            if (res.status === 200) {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.resizeList()
              }, 500)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.duty_add {
  // font-size: 12px;
  /deep/.van-tab__text {
    line-height: 30px;
    // font-size: 13px;
  }
  /deep/ .van-popup {
    position: absolute;
  }
  /deep/ .van-overlay {
    position: absolute;
  }

  .duty_choose {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 36px;
    // background-color: #f4f6f8;
    position: relative;
    padding: 0 10px;
    background-color: #ffffff;
    border-bottom: 1px solid #efefef;
    .duty_choose_time {
      display: flex;
      align-items: center;
      margin-left: 5px;
      margin-right: 10px;
      span {
        width: 0;
        height: 0;
        border-top: 3px solid #dcdee0;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        margin-left: 4px;
      }
    }
    /deep/.van-dropdown-menu {
      margin-right: 10px;
      .van-dropdown-menu__bar {
        height: 36px;
        background-color: transparent;
        box-shadow: none;
        .time_title {
          font-size: 14px;
        }
      }
      .van-popup--top {
        position: absolute;
      }
      .van-dropdown-item {
        position: absolute;
        top: 36px !important;
        height: 100vh;
        width: 100%;
        .van-dropdown-item__content {
          max-height: 50%;
        }
      }
    }
  }
  .dutyList {
    padding: 8px 10px;
    // background-color: #f7f7f7;
    font-size: 13px;
    color: #666666;
    .r_btn_success {
      color: #67c23a;
    }
    .r_btn_primary {
      color: #ee792f;
    }
    .r_btn_red {
      color: #f56c6c;
    }
    .timeChoose {
      width: 90px;
      background-color: #ffffff;
      padding: 8px 0;
      text-align: center;
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      position: relative;
      span {
        width: 0;
        height: 0;
        border-bottom: 8px solid #999999;
        border-left: 8px solid transparent;
        position: absolute;
        right: 2px;
        bottom: 2px;
      }
    }
    .duty_info {
      // margin: 10px 0;
      padding: 5px 8px;
      border-bottom: 1px solid #efefef;
      .top,
      .center {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .center {
        font-size: 13px;
        color: #333333;
        padding-top: 8px;
        .top_titme {
          width: 90px;
          min-width: 90px;
          text-align: right;
        }
      }
      .duty_center {
        font-size: 12px;
      }
      .center_status {
        border-radius: 3px;
        padding: 1px 2px;
        font-size: 12px;
        border: 1px solid #ececec;
        color: #7d27a0;
        margin-right: 8px;
      }
      .center_right {
        display: flex;
        align-items: center;
        .recall {
          margin-left: 10px;
          .van-icon {
            font-size: 18px;
          }
          .iconzhongzhi {
            font-size: 16px;
          }
        }
      }
    }
  }
  // 底部
  .addNew {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    width: 48px;
    height: 48px;
    img {
      width: 100%;
      opacity: 0.7;
    }
  }
}
/deep/.popu_picker {
  .van-picker__cancel,
  .van-picker__confirm {
    font-size: 16px;
  }
  .van-picker-column {
    font-size: 16px;
  }
}
</style>
